<%--
  Created by IntelliJ IDEA.
  User: liujiajia
  Date: 2016/12/26
  Time: 上午10:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>排行</title>
    <meta charset="UTF-8">
    <title>Tabbar</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
</head>
<body>

<header class="m-navbar">
    <a href="/root/toRanking.do" class="navbar-item"><i class="back-ico"></i></a>
    <div class="navbar-center"><span class="navbar-title">导购数据排行</span></div>
</header>


<section class="g-scrollview">
    <div class="m-celltitle">导购数据</div>
    <ul class="m-grids-2" id="sc_phb">
        <li class="grids-item">
            <div class="grids-icon">
                <i class="demo-icons-cell"></i>
            </div>
            <div  class="grids-txt">
                销售数据排行<br>
                NO.1 xxx
            </div>
        </li>
        <li class="grids-item">
            <div class="grids-icon">
                <i class="demo-icons-cell"></i>
            </div>
            <div class="grids-txt">
                核券排行<br>
                NO.1 xxx
            </div>
        </li>
    </ul>

    <div class="m-celltitle">统计周期</div>

    <div class="cell-item">
        <div class="cell-left"><i class="cell-icon demo-icons-discover"></i></div>
        <div class="cell-right">
            <input type="text"  class="cell-input" placeholder="请输入工号或姓名" autocomplete="off" />
            <a href="javascript:;" class="btn btn-hollow">搜索</a>
        </div>
    </div>
    <%--排行表--%>
    <section class="g-scrollview" id="J_List">
        <div id="pabtitle" class="m-celltitle" style="text-align: center">销售数据排行</div>
        <ul class="m-grids-5">
            <li class="grids-item">
                <div class="grids-txt">排名</div>
            </li>
            <li class="grids-item">
                <div class="grids-txt">工号</div>
            </li>
            <li class="grids-item">
                <div class="grids-txt">姓名</div>
            </li>
            <li class="grids-item">
                <div class="grids-txt">核券量</div>
            </li>
            <li class="grids-item">
                <div class="grids-txt">核券额</div>
            </li>
        </ul>
        <div id="J_ListContent" class="m-list list-theme1"></div>
    </section>


</section>




<jsp:include page="../report_inc.jsp" />
</body>
    <script id="J_ListHtml" type="text/html">
            {{each list as data}}
    <a href="{{data.url}}" class="list-item">
            <div class="list-img">
            <img src="http://static.ydcss.com/uploads/ydui/goods_default.jpg" data-url="{{data.img}}">
            </div>
            <div class="list-mes">
            <h3 class="list-title">{{data.title}}</h3>
    <div class="list-mes-item">
            <div>
            <span class="list-price"><em>¥</em>{{data.marketprice}}</span>
    <span class="list-del-price">¥{{data.productprice}}</span>
    </div>
    </div>
    </div>
    </a>
    {{/each}}
</script>

<script src="http://static.ydcss.com/libs/arttemplate/template.js"></script>

<script>
    !function () {
        var lis=$("#sc_phb").find("li");
        for(var i=0;i<lis.length; i++) {
            if (lis[i].tagName == "LI") {
                lis[i].onclick = (function (i) {
                    return function () {
                        switch (i){
                            case 0:
                               $("#pabtitle").html("销售数据排行");
                                break;
                            case 1:
                                $("#pabtitle").html("核券排行");
                                break;
                        }
                    }
                })(i);
            }
        }



        // 根据实际情况自定义获取数据方法
        var page = 1, pageSize = 10;
        var loadMore = function (callback) {
            $.ajax({
                url: 'http://list.ydui.org/getdata.php?type=backposition',
                dataType: 'jsonp',
                data: {
                    page: page,
                    pagesize: pageSize
                },
                success: function (ret) {
                    typeof callback == 'function' && callback(ret);
                }
            });
        };

        $('#J_List').infiniteScroll({
            binder: '#J_List',
            pageSize: pageSize,
            initLoad: true,
            loadingHtml: '<img src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>',
            loadListFn: function () {
                var def = $.Deferred();

                loadMore(function (listArr) {

                    var html = template('J_ListHtml', {list: listArr});
                    $('#J_ListContent').append(html).find('img').lazyLoad({binder: '#J_List'});

                    def.resolve(listArr);

                    ++page;
                });

                return def.promise();
            }
        });
    }();
</script>

</html>
